<template>
    <view class="page">
        <view class="step-wrap">
            <view class="active">身份认证</view>
            <view :class="{active:page>1}">驾驶证认证</view>
        </view>

        <view class="card" v-if="page==1">
            <view class="title">请按照示例图提交身份证照片</view>
            <view class="img-wrap">
                <image :src="formData.idCardImg|mmvImageUrl" @click="onCheckIdCard('front')"></image>
                <image :src="formData.idCardImgBack|mmvImageUrl" @click="onCheckIdCard('back')"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="list">
                <view class="label">姓名 <text>{{formData.customerName}}</text></view>
                <view class="label">身份证号 <text>{{formData.idCardNo}}</text></view>
                <view class="label">失效日期 <text>{{formData.idCardExpirydate}}</text></view>
            </view>
        </view>

        <view class="card" v-if="page==2">
            <view class="title">请按照示例图提交驾驶证照片</view>
            <view class="img-wrap">
                <image :src="formData.driverImg|mmvImageUrl" @click="onCheckDriverCard('front')"></image>
                <image :src="formData.driverImgBack|mmvImageUrl" @click="onCheckDriverCard('back')"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="list">
                <view class="label">档案编号 <text>{{formData.driverNo}}</text></view>
                <view class="label">准驾车型 <text>{{formData.quasiDrivingType}}</text></view>
                <view class="label">失效日期 <text>{{formData.driverValidity}}</text></view>
            </view>
        </view>

        <view class="tip">本人承诺证件真实有效，由此产生的法律责任由本人承担</view>
        <view class="tip2">信息完善奖励积分</view>
        <view class="bottom-button" @click="next">下一步</view>
        <!-- 登录弹窗 -->
        <LoginMask></LoginMask>
    </view>
</template>

<script>
import * as relaNameApi from '@/common/apis/relaName-api';
import * as baseApi from '@/common/api';
import LoginMask from '@/components/layout/login-mask.vue';

export default {
    components: {
        LoginMask,
    },
    data() {
        return {
            page: 1,
            formData: {
                idCardImg: "/static/idCardImg.jpg", // 身份证正面
                idCardImgBack: "/static/idCardImgBack.jpg", // 身份证背面
                driverImg: "/static/driverImg.jpg", // 驾驶证正页
                driverImgBack: "/static/driverImgBack.jpg", // 驾驶证副页
                customerName: "", // 姓名
                idCardNo: "", // 身份证号
                idCardExpirydate: "", // 身份证失效日期
                driverNo: "", // 驾驶证号
                quasiDrivingType: "", // 准驾车型
                driverValidity: "", // 驾驶证失效日期
                deptId: "", // 部门id
                businessPersonId: "" // 业务员id(非必传)
            },
            redirect: "",
        };
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        deptId() {
            return this.$store.state.user.deptId;
        },
    },
    watch: {
        openid(val) {
            this.validate();
        },
    },
    onLoad(op) {
        // 记录重定向地址
        if (op.redirect) {
            this.redirect = decodeURIComponent(op.redirect);
        }
    },
    async mounted() {
        // await this.$store.dispatch('user/MmvLogin');
        await this.validate();
    },
    methods: {
        /**
         * 验证是否实名
         */
        async validate() {
            const result = await relaNameApi.valiAuthentication({ openid: this.openid });
            if (result == 2) {
                uni.showToast({ title: '用户已实名', icon: 'success' });
                await this.leavePage();
            }
        },
        /**
         * 选择图片
         */
        async chooseImage() {
            return new Promise((resolve, reject) => {
                uni.chooseImage({
                    success({ tempFilePaths }) {
                        resolve(tempFilePaths);
                    },
                    fail(err) {
                        uni.showToast({ title: '图片选择失败', icon: 'error' });
                        reject(err);
                    }
                })
            });
        },
        /**
         * 上传图片
         */
        async upload(url) {
            uni.showToast({ title: '图片上传中...', icon: 'loading' });
            try {
                const result = await baseApi.uploadfiles({
                    name: 'file',
                    filePath: url,
                });
                uni.showToast({ title: '图片上传成功', icon: 'success' });
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交身份证
         */
        async onCheckIdCard(idCardSide) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                const result = await relaNameApi.idCard({
                    url: url,
                    idCardSide,
                });
                if (idCardSide == 'front') {
                    this.formData.idCardImg = url;
                    this.formData.customerName = result.name;
                    // this.formData.address = result.address;
                    this.formData.idCardNo = result.idCard;
                }
                if (idCardSide == 'back') {
                    this.formData.idCardImgBack = url;
                    // this.formData.startDate = result.startDate;
                    this.formData.idCardExpirydate = result.endDate;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交驾驶证
         */
        async onCheckDriverCard(driverCardSide) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                if (driverCardSide == 'front') {
                    const result = await relaNameApi.driverCard({
                        url: url,
                    });
                    this.formData.driverImg = url;
                    this.formData.driverNo = result.driverNo;
                    this.formData.quasiDrivingType = result.carType;
                    this.formData.driverValidity = result.endTime;
                }
                if (driverCardSide == 'back') {
                    this.formData.driverImgBack = url;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 下一步
         */
        async next() {
            if (this.page == 1) {
                if (!this.formData.idCardImg || this.formData.idCardImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证人像', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardImgBack || this.formData.idCardImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证国徽', icon: 'error' });
                    return;
                }
                if (!this.formData.customerName) {
                    uni.showToast({ title: '缺少姓名', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardNo) {
                    uni.showToast({ title: '缺少身份证号', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardExpirydate) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                this.page = 2;
            } else {
                if (!this.formData.driverImg || this.formData.driverImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证正页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverImgBack || this.formData.driverImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证副页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverNo) {
                    uni.showToast({ title: '缺少驾驶证号', icon: 'error' });
                    return;
                }
                if (!this.formData.quasiDrivingType) {
                    uni.showToast({ title: '缺少准驾车型', icon: 'error' });
                    return;
                }
                if (!this.formData.driverValidity) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                await this.submit();
            }
        },
        /**
         * 提交认证信息
         */
        async submit() {
            this.formData.deptId = this.deptId;
            try {
                const result = await relaNameApi.authentication(this.formData);
                uni.showToast({ title: '完成' });
                await this.leavePage();
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
                await this.leavePage();
            }
        },
        /**
         * 离开页面
         */
        async leavePage() {
            if (this.redirect) {
                // console.log(this.redirect)
                uni.redirectTo({ url: this.redirect });
            } else {
                uni.navigateBack();
            }
        },

    },
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
}
.step-wrap {
    margin-top: 53upx;
    margin-bottom: 35upx;
    display: flex;
    justify-content: center;
    view {
        background: #cfcfcf;
        color: #fff;
        font-size: 28upx;
        font-weight: bold;
        padding: 21upx 44upx;
        border-radius: 35px;
    }
    view + view {
        margin-left: 176upx;
    }
    .active {
        background: #12b9a3;
    }
}

.card {
    padding: 40upx 16upx;
    margin-bottom: 30upx;
    .title {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
    }
    .img-wrap {
        margin-bottom: 34upx;
        display: flex;
        justify-content: space-between;
        image {
            width: 330upx;
            height: 184upx;
        }
    }
    .desc {
        margin-bottom: 49upx;
        font-size: 26upx;
        font-weight: bold;
        color: #999;
    }

    .list {
        .label {
            margin-bottom: 28upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
            display: flex;
            justify-content: space-between;
        }
    }
}
.tip {
    font-size: 24upx;
    font-weight: bold;
    color: #eb314f;
    text-align: center;
}
.tip2 {
    width: 100%;
    font-size: 26upx;
    font-weight: bold;
    text-align: center;
    color: #232323;
    position: fixed;
    bottom: 113upx;
}
.bottom-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    line-height: 96upx;
    background: #12baa4;
    text-align: center;
    color: #fff;
}
</style>
